<template>
    <div class="login">
        <h1>登录</h1>
        <br />
        <input type="text" placeholder="请输入数字" v-model="password" />
        <br />
        <button @click="handleLogin">确认</button>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
import { loginModel } from '@/models/loginModel';
import { useLoginStore } from '@/stores/loginStore';
import { ref } from 'vue';
const { state, actions } = useLoginStore();
const goToTargetRoute = () => {
    router.push('/users');
}
const password = ref("");
const handleLogin = () => {
    //发送登录请求
    let packet = loginModel.cratePacket();
    packet.password = password.value;
    packet.uuid = "50051ab0-ec11-4733-8279-b89c6d0bdb5d";
    actions.login(packet).then(() => {

        //判断是否登录成功
        console.log(state.login);
        if (state.login.login) {
            //登录成功
            goToTargetRoute();
        } else {
            //登录失败
            alert("登录失败");
            password.value = "";
        }
    });
}
</script>
<style>
/* 垂直居中div */
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
}

.login h1 {
    font-size: 3rem;
}

.login input {
    font-size: 2rem;
    width: 90vw;
}

.login input:focus {
    border-color: #4CAF50;
}

.login button {
    font-size: 1rem;
    width: 30vw;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: white;
}
</style>